<!DOCTYPE html>

<html lang="en" ng-app="myApp01">

<head>
  <meta charset="utf-8" />
  <!-- angular库文件 -->
  <script src="../lib/angular.min.js"></script>
  <script src="../script/01.js"></script>
  <link rel="stylesheet" href="../style/common.css" />
  <link rel="stylesheet" href="../style/01.css" />
  <!-- <link rel="stylesheet/less" type="text/css" href="./01.less" /> -->
  <!-- <script src="../lib/less.min.js"></script> -->
  <!-- 务必确保在 less.js 之前加载你的样式表。
  如果加载多个 .less 样式表文件，每个文件都会被单独编译。
  因此，一个文件中所定义的任何变量、mixin 或命名空间都无法在其它文件中访问。 
  //TODO: 实际开发的时候再引入less,以及预编译等处理
  //TODO: 需要把头文件抽取成公共的
  -->

  <title>实时监测</title>

</head>

<body ng-controller="DRController01">
  <div class="common-content">

    <div class="common-title">
      <div class="title-bar">电容器在线监测智能云平台</div>
      <div class="icon-bar">
        <div class="icon-div icon-horn"></div>
        <div class="icon-div icon-enlarge"></div>
        <div class="icon-word-div icon-man">管理员</div>
      </div>
      <div class="tab-bar">
        <div class="tab-div">主页</div>
        <div class="tab-div">实时监测</div>
        <div class="tab-div active">事件管理</div>
        <div class="tab-div">报表管理</div>
        <div class="tab-div">配置管理</div>
      </div>
    </div>

    <div class="common-body">

      <div class="search-bar">

        <div class="search-group">
          <label class="sea-label">位置名称</label>
          <input class="sea-input" />
        </div>

        <div class="search-group">
          <label class="sea-label">事件级别</label>
          <select class="sea-input">
            <option value ="一般级">一般级</option>
            <option value ="告警级">告警级</option>
            <option value="事故级">事故级</option>
          </select>
        </div>

        <div class="search-group">
          <label class="sea-label">发生时间</label>
          <input class="sea-input timer-front" value="2017-08-08 22:22:22" />
          <span class="wave">-</span>
          <input class="sea-input timer-back" value="2018-08-08 22:22:22" />
        </div>

        <div class="search-group">
          <label class="sea-label">事件类型</label>
          <select class="sea-input">
              <option value ="操作事件">操作事件</option>
              <option value ="遥信变位">遥信变位</option>
            </select>
        </div>

        <div class="btn-search">查询</div>

      </div>

      <div class="search-result">
        <table class="tal-all" border="1" cellspacing="0">
          <tr>
            <th class="tab-title">位置名称</th>
            <th class="tab-title">事件级别</th>
            <th class="tab-title">时间</th>
            <th class="tab-title">事件类型</th>
            <th class="tab-title">事件内容</th>
            <th class="tab-title">事件动作</th>
          </tr>
          <tr ng-repeat="item in resultList">
            <td class="tab-value" ng-class="'tab-value-color-'+item.level">{{ item.name+($index+1) }}</td>
            <td class="tab-value" ng-class="'tab-value-color-'+item.level">{{ item.levelDesc }}</td>
            <td class="tab-value" ng-class="'tab-value-color-'+item.level">{{ item.time }}</td>
            <td class="tab-value" ng-class="'tab-value-color-'+item.level">{{ item.type }}</td>
            <td class="tab-value" ng-class="'tab-value-color-'+item.level">{{ item.content }}</td>
            <td class="tab-value" ng-class="'tab-value-color-'+item.level">{{ item.oprate }}</td>
          </tr>
        </table>
      </div>

      <div class="pagination">
        <div class="btn-select-page">&lt;&lt;</div>
        <div class="btn-select-page">1</div>
        <div class="btn-select-page">2</div>
        <div class="btn-select-page">3</div>
        <div class="btn-select-page">4</div>
        <div class="btn-select-page">&gt;&gt;</div>
      </div>

    </div>


  </div>

</body>

</html>